{template 'tpl_header'}

<div class="weui-panel weui-panel_access" style="margin-top: 0;background-color:#f8f8f8;">
    <!--<div class="single-like">
        <i class="iconfont icon-like single-like_no"></i>
    </div>-->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            {loop $goods['thumbs'] $thumbs}
            <div class="swiper-slide">
                <img src="{php echo tomedia($thumbs)}"/>
            </div>
            {/loop}
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <div class="weui-panel weui-panel_access" style="margin-top: 0;">
        <div class="weui-panel__bd">
            <div class="weui-detail-box weui-detail-box_text">
                <div class="weui-detail-box__title">{$goods['name']}</div>
                <div class="weui-detail-box__price2">
                    ¥{php echo number_format(round($goods['adult_price']*$goods['exchange_rate']),2)}／人起
                </div>
                <div class="weui-detail-box__desc">
                    {$goods['remark']}
                </div>
            </div>
        </div>
    </div>

    <div class="weui-panel weui-panel_access">
        <div class="weui-cells" style="margin-top: 0;font-size: 14px;">
            <div class="weui-cell weui-cell_access">
                <div class="weui-cell__hd"><label for="date" class="weui-label">选择日期</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" placeholder="请选择出行日期" id="date" type="text">
                </div>
                <div class="weui-cell__ft">
                </div>
            </div>
            {if !empty($sku_list) }
            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label for="date" class="weui-label">具体时间</label>
                </div>
                <div class="weui-cell__bd sku">
                    {loop $sku_list $sku}
                    {if $sku['id'] == $sku_list[0]['id']}
                    <a href="javascript:;" id="sku_{$sku['id']}" data-id="{$sku['id']}" onclick="sku({$sku['id']});" class="weui-btn weui-btn_mini weui-btn_primary" style="margin-top: 0">{$sku['name']}</a>
                    {else}
                    <a href="javascript:;" id="sku_{$sku['id']}" data-id="{$sku['id']}" onclick="sku({$sku['id']});" class="weui-btn weui-btn_mini weui-btn_plain-primary sku_btn" style="margin-top: 0">{$sku['name']}</a>
                    {/if}
                    {/loop}
                </div>
            </div>
            {/if}
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>选择人数</p>
                </div>
                <div class="weui-cell__ft">

                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">成年</label></div>
                <div class="weui-cell__bd" style="color: #11a4c0;">
                    ¥{php echo number_format(round($goods['adult_price']*$goods['exchange_rate']),2)}
                </div>
                <div class="weui-cell__ft">
                    <div class="weui-count">
                        <a class="weui-count__btn weui-count__decrease"></a>
                        <input class="weui-count__number" name="adult_number" type="number" value="0"/>
                        <a class="weui-count__btn weui-count__increase"></a>
                    </div>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">儿童<span
                        style="font-size:10px;color:#333333;">(3-11周岁)</span></label></div>
                <div class="weui-cell__bd" style="color: #11a4c0;">
                    ¥{php echo number_format(round($goods['child_price']*$goods['exchange_rate']),2)}
                </div>
                <div class="weui-cell__ft">
                    <div class="weui-count">
                        <a class="weui-count__btn weui-count__decrease"></a>
                        <input class="weui-count__number" name="child_number" type="number" value="0"/>
                        <a class="weui-count__btn weui-count__increase"></a>
                    </div>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">婴儿<span
                        style="font-size:10px;color:#333333;">(3岁以下)</span></label></div>
                <div class="weui-cell__bd" style="color: #11a4c0;">
                    ¥{php echo number_format(round($goods['baby_price']*$goods['exchange_rate']),2)}
                </div>
                <div class="weui-cell__ft">
                    <div class="weui-count">
                        <a class="weui-count__btn weui-count__decrease"></a>
                        <input class="weui-count__number" name="baby_number" type="number" value="0"/>
                        <a class="weui-count__btn weui-count__increase"></a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="weui-tab-box">
        <!-- 项目菜单 -->
        <ul class="weui-tab-box__tabs">
            <li id="1" class="weui-tab-box__current">
                <div class="weui-tab-box__tabs__title">产品介绍</div>
                <div class="weui-tab-box__tabs__line"></div>
            </li>
            <li id="2" class="">
                <div class="weui-tab-box__tabs__title">费用说明</div>
                <div class="weui-tab-box__tabs__line"></div>
            </li>
            <li id="3" class="">
                <div class="weui-tab-box__tabs__title">使用说明</div>
                <div class="weui-tab-box__tabs__line"></div>
            </li>
            <li id="4" class="">
                <div class="weui-tab-box__tabs__title">购买须知</div>
                <div class="weui-tab-box__tabs__line"></div>
            </li>

        </ul>
        <div class="seize-seat">
            占位
        </div>
        <div class="weui-panel__bd" id="weui-panel__bd1">
            <div class="weui-detail-box weui-detail-box_appmsg">
                <div class="weui-detail-box__bd">
                    <div class="weui-detail-box__tag">
                        {$goods['product_desc']['title']}
                    </div>
                    <p class="weui-detail-box__desc">
                        {loop $goods['product_desc']['desc'] $i $d}
                        {if count($goods['product_desc']['desc'])-1 > $i}
                        {$d}<br>
                        {else}
                        {$d}
                        {/if}
                        {/loop}
                    </p>
                    <div class="weui-detail-box__li">
                        <div class="weui-detail-box__li__title">参考行程</div>
                        <div class="weui-detail-box__li__content single-row">
                            {if !empty($goods['product_desc']['trip']) }
                            {loop $goods['product_desc']['trip'] $index $trip}
                            {if count($goods['product_desc']['trip'])-1 > $index }
                            <div class="single-time_title">
                                <i class="iconfont icon-time"></i>&nbsp;{$trip['trip_title']}
                            </div>
                            <div>
                                <div class="single-time_border">
                                    <div class="single-time_content">
                                        {loop $trip['trip_desc'] $i $t}
                                        {if count($trip['trip_desc'])-1 > $i }
                                        {$t}<br>
                                        {else}
                                        {$t}
                                        {/if}
                                        {/loop}
                                    </div>
                                </div>
                            </div>
                            {else}
                            <div class="single-time_title">
                                <i class="iconfont icon-time"></i>&nbsp;{$trip['trip_title']}
                            </div>
                            <div>
                                <div class="single-time_not_border">
                                    <div class="single-time_content">
                                        {loop $trip['trip_desc'] $i $t}
                                        {if count($trip['trip_desc'])-1 > $i}
                                        {$t}<br>
                                        {else}
                                        {$t}
                                        {/if}
                                        {/loop}
                                    </div>
                                </div>
                            </div>
                            {/if}
                            {/loop}
                            {/if}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="weui-panel__bd" id="weui-panel__bd2" style="display: none;">
            <div class="weui-detail-box weui-detail-box_appmsg">
                <div class="weui-detail-box__bd">
                    <div class="weui-detail-box__tag">
                        {$goods['price_desc']['title']}
                    </div>
                    {if !empty($goods['price_desc']['price']) }
                    {loop $goods['price_desc']['price'] $price}
                    <div class="weui-detail-box__li">
                        <div class="weui-detail-box__li__title">{$price['price_title']}</div>
                        <div class="weui-detail-box__li__content">
                            {if !empty($price['price_desc']) }
                            {loop $price['price_desc'] $desc}
                            {$desc}<br/>
                            {/loop}
                            {/if}
                        </div>
                    </div>
                    {/loop}
                    {/if}
                </div>
                </a>
            </div>
        </div>
        <div class="weui-panel__bd" id="weui-panel__bd3" style="display: none;">
            <div class="weui-detail-box weui-detail-box_appmsg">
                <div class="weui-detail-box__bd">
                    <div class="weui-detail-box__tag">
                        {$goods['use_desc']['title']}
                    </div>
                    {if !empty($goods['use_desc']['use']) }
                    {loop $goods['use_desc']['use'] $use}
                    <div class="weui-detail-box__li">
                        <div class="weui-detail-box__li__title">{$use['use_title']}</div>
                        <div class="weui-detail-box__li__content">
                            {if !empty($use['use_desc']) }
                            {loop $use['use_desc'] $desc}
                            {$desc}<br/>
                            {/loop}
                            {/if}
                        </div>
                    </div>
                    {/loop}
                    {/if}
                </div>
                </a>
            </div>
        </div>
        <div class="weui-panel__bd" id="weui-panel__bd4" style="display: none;">
            <div class="weui-detail-box weui-detail-box_appmsg">
                <div class="weui-detail-box__bd">
                    <div class="weui-detail-box__tag">
                        {$goods['buy_desc']['title']}
                    </div>
                    {if !empty($goods['buy_desc']['buy']) }
                    {loop $goods['buy_desc']['buy'] $buy}
                    <div class="weui-detail-box__li">
                        <div class="weui-detail-box__li__title">{$buy['buy_title']}</div>
                        <div class="weui-detail-box__li__content">
                            {if !empty($buy['buy_desc']) }
                            {loop $buy['buy_desc'] $desc}
                            {$desc}<br/>
                            {/loop}
                            {/if}
                        </div>
                    </div>
                    {/loop}
                    {/if}
                </div>
                </a>
            </div>
        </div>
    </div>
    <div class="nav-seize-seat"></div>
    <div class="nav-price">
        <div class="nav-price_info">
            <span class="nav-price_info_title">总额：</span><span class="nav-price_info_price">￥0.00</span>
        </div>
        <div class="nav-price_button">
            <a href="javascript:;" id="submit" class="weui-btn weui-btn_mini weui-btn_primary"
               style="margin-top: 0">下一步</a>
        </div>
        <div class="clear"></div>
    </div>
</div>
{template 'tpl_footer'}
<script src="{MOBILE_RES}js/swiper.min.js"></script>
<script>
    var adult_price = parseInt("{php echo round($goods['adult_price']*$goods['exchange_rate']) }");
    var child_price = parseInt("{php echo round($goods['child_price']*$goods['exchange_rate']) }");
    var baby_price = parseInt("{php echo round($goods['baby_price']*$goods['exchange_rate']) }");
    var is_login = '{php echo $is_login}';
    amount_calculation();
    $(function () {
        $(".swiper-container").swiper({
            loop: true,
            autoplay: 3000
        });
        $("#date").calendar({
            minDate: new Date() - (3600 * 24 * 1000),
            value: Date.parse(new Date()),
            dateFormat: 'yyyy/mm/dd'  // 自定义格式的时候，不能通过 input 的value属性赋值 '2016年12月12日' 来定义初始值，这样会导致无法解析初始值而报错。只能通过js中设置 value 的形式来赋值，并且需要按标准形式赋值（yyyy-mm-dd 或者时间戳)
        });

        /**
         * 根据url #hash值切换tab签
         */
        var hash = window.location.hash;
        if (hash) {
            var index = hash.substring(1);
            exchangeTab($(".weui-tab-box__tabs li").eq(index));
        }

        /**
         * tab标签栏切换
         */
        $(".weui-tab-box__tabs li").click(function () {
            var $this = $(this);
            var id = $this.attr("id");
            $('.weui-tab-box__current').removeClass('weui-tab-box__current');
            $this.addClass('weui-tab-box__current');
            $('.weui-panel__bd').hide();
            $('#weui-panel__bd' + id).show();
        });

        //tab change
        $(window).scroll(function () {
            var nav_tab = $(".weui-tab-box").position().top;
            if ($(window).scrollTop() >= (nav_tab + 10)) {
                $(".weui-tab-box__tabs").addClass("weui-tab-box__add__class");
                $(".weui-tab-box__content").addClass("weui-tab-box__padding__class");
                $(".seize-seat").show();

            } else {
                $(".weui-tab-box__tabs").removeClass("weui-tab-box__add__class");
                $(".weui-tab-box__content").removeClass("weui-tab-box__padding__class");
                $(".seize-seat").hide();

            }
        })

        FastClick.attach(document.body);

        $('#submit').click(function () {
            if (is_login == '0') {
                window.location.href = "{php echo url('entry', array('m' => 'vj_bontrip','do' => 'register'),true);}";
                return false;
            }
            var date = $('#date').val();
            if (date == '') {
                $.toast('请填写出行时间', "cancel");
                return false;
            }
            var adult_number = $('input[name="adult_number"]').val();
            var child_number = $('input[name="child_number"]').val();
            var baby_number = $('input[name="baby_number"]').val();
            var sku_id = $('.sku').find('.weui-btn_primary').attr('data-id');
            if (adult_number == 0 && child_number == 0 && baby_number == 0) {
                $.toast('请选择出行人', "cancel");
                return false;
            }
            var url = "{php echo url('entry', array('m' => 'vj_bontrip','do' => 'payment','type' => $type),true);}";
            url += "&id={$id}&adult_number="+adult_number+"&child_number="+child_number+"&baby_number="+baby_number+"&date="+date+"&sku_id="+sku_id;
            window.location.href = url;
        });
    });

    function exchangeTab($tab, id) {
        var $this = $tab;

        if ($this.hasClass("weui-tab-box__current")) {
            return false;
        }

        if ($this.hasClass("menu")) {
            return true;
        }

        if (id == "1") {
            $("#weui-panel__bd1").show();
            $("#weui-panel__bd2").hide();
        } else {
            $("#weui-panel__bd2").show();
            $("#weui-panel__bd1").hide();
        }

        $this.addClass("weui-tab-box__current").siblings("li").removeClass("weui-tab-box__current");
        var index = $this.index();

        var $currentTabContent = $this.parent().parent().find(".weui-tab-box__content").eq(index).addClass("weui-tab-box__current");
        $currentTabContent.siblings(".weui-tab-box__content").removeClass("weui-tab-box__current");

        /*使用document.location.replace，hash锚点改变的url不会写入缓存，不影响后退功能*/
        document.location.replace(getFilterUrl(index));
    }

    function getFilterUrl(hash) {
        return document.location.protocol + '//' + document.location.host + document.location.pathname + document.location.search + "#" + hash;
    }

    function amount_calculation() {
        var adult_number = $('input[name="adult_number"]').val();
        var child_number = $('input[name="child_number"]').val();
        var baby_number = $('input[name="baby_number"]').val();
        var price = formatMoney((adult_number * adult_price) + (child_number * child_price) + (baby_number * baby_price), 2, '￥');
        $('.nav-price_info_price').text(price);
    }

    var MAX = 99, MIN = 0;
    $('.weui-count__decrease').click(function (e) {
        var $input = $(e.currentTarget).parent().find('.weui-count__number');
        var number = parseInt($input.val() || "0") - 1
        if (number < MIN) number = MIN;
        $input.val(number);
        amount_calculation();
    });
    $('.weui-count__increase').click(function (e) {
        var $input = $(e.currentTarget).parent().find('.weui-count__number');
        var number = parseInt($input.val() || "0") + 1
        if (number > MAX) number = MAX;
        $input.val(number);
        amount_calculation();
    });

    function formatMoney(number, places, symbol, thousand, decimal) {
        number = number || 0;
        places = !isNaN(places = Math.abs(places)) ? places : 2;
        symbol = symbol !== undefined ? symbol : "";
        thousand = thousand || ",";
        decimal = decimal || ".";
        var negative = number < 0 ? "-" : "",
            i = parseInt(number = Math.abs(+number || 0).toFixed(places), 10) + "",
            j = (j = i.length) > 3 ? j % 3 : 0;
        return symbol + negative + (j ? i.substr(0, j) + thousand : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousand) + (places ? decimal + Math.abs(number - i).toFixed(places).slice(2) : "");
    }

    function sku(id) {
        var obj = $('.sku').find('.weui-btn_primary');
        obj.removeClass('weui-btn_primary');
        obj.addClass("weui-btn_plain-primary");
        obj.addClass("sku_btn");
        $('#sku_'+id).removeClass("weui-btn_plain-primary");
        $('#sku_'+id).removeClass("sku_btn");
        $('#sku_'+id).addClass("weui-btn_primary");
    }
</script>